<template>
  <div class="card-container flex flex-col">
    <div :class="{ 'header-title-container': true, 'isstack': isstack }">
      <!-- 新增的平行四边形容器 -->
      <div class="parallelogram-container">
        <div class="parallelogram blue1"></div>
        <div class="parallelogram blue2"></div>
        <div class="card-title">{{ title }}</div>
      </div>
      <div class="gradient-line"></div>
      <!-- 新增的三段式渐变 div -->
      <div class="multi-gradient-line"></div>
    </div>

    <div class="slot-wrapper">
      <slot></slot>
    </div>
  </div>
</template>
<script setup>
import { defineProps } from 'vue';

defineProps({
  title: {
    type: String,
    required: true,
    default: '默认标题'
  },
  isstack: {
    type: Boolean,
    default: false
  }
});
</script>
<style scoped>
.card-container{
  width: 100%;
  height: 100%;
}
.header-title-container {
  width: 21vw;
  /* height: 100%; */
  --scale: 100;
  /* 默认缩放为 100%，可外部传入控制 */
  --fontSize: 1;
  position: relative;
  margin-bottom: calc(var(--scale) * 1 / 100 * 1vw);
}

.parallelogram-container {
  position: relative;
  /* 或 absolute */
  z-index: 10;
  display: flex;
  justify-content: start;
  align-items: baseline;
  height: calc(var(--scale) * 1.2 * var(--fontSize) / 100 * 1vw);
  gap: calc(var(--scale) * 0.5 * var(--fontSize) / 100 * 1vw);
}

.parallelogram {
  width: calc(var(--scale) * 0.8 / 100 * 1vw);
  height: calc(var(--scale) * 1 / 100 * 1vw);
  background-color: #1ea2ff;
  /* 默认颜色 */
  transform: skewX(-20deg);
  /* 创建平行四边形效果 */
  /* border-radius: 8px; */
}

.blue1 {
  background-color: #1ea2ff;
}

.blue2 {
  background-color: #09e0f3;
}

.card-title {
  text-align: center;
  font-size: calc(var(--scale) * 1 * var(--fontSize) / 100 * 1vw);
  font-weight: bold;
  letter-spacing: calc(var(--scale) * 1.2 / 100 * 1px);
  /* px 更适合固定间距 */
  color: #fff;
  text-shadow:
    0 0 calc(var(--scale) * 4 / 100 * 1vw) #00eaff,
    0 0 calc(var(--scale) * 1 / 100 * 1vw) #fff,
    0 calc(var(--scale) * 1 / 100 * 1vw) calc(var(--scale) * 4 / 100 * 1vw) #1e3c5a;
  filter: brightness(1.2);
  user-select: none;
}
.gradient-line {
  z-index: 1;
  position: absolute;
  top: calc(var(--scale) * 0.6 * var(--fontSize) / 100 * 1vw);
  width: 100%; /* 充满父容器宽度 */
  height: calc(var(--scale) * 1 * var(--fontSize) / 100 * 1vw);
  transform: skewX(-20deg); /* 创建平行四边形效果*/
  background: linear-gradient(
    to right,
    rgba(39, 210, 255, 0.73) 0%,
    /* 左侧 73% 透明（即 1 - 0.73 = 0.27） */ rgba(39, 210, 255, 0) 100% /* 右侧完全不透明 */
  );
}
.multi-gradient-line {
  z-index: 1;
  position: absolute;
  top: calc(var(--scale) * 1 * var(--fontSize) / 100 * 1vw);
  width: 100%;
  height: calc(var(--scale) * 1 * var(--fontSize) / 100 * 1vw);
  transform: skewX(-20deg); /* 创建平行四边形效果*/
  background: linear-gradient(
    to right,
    rgba(39, 210, 255, 0) 0%,
    /* 左侧完全不透明 */ rgba(39, 210, 255, 0.62) 50%,
    /* 中间 62% 透明（即 1 - 0.62 = 0.38） */ rgba(39, 210, 255, 0) 100% /* 右侧完全不透明 */
  );
}
.slot-wrapper {
  width: 100%;
  height: 100%;
  font-size: calc(var(--scale) * 5 / 100 * 1vw);
  /* text-align: center; */
  color: #fff;
  border: 2px solid #2da2d4;
  /* border:1px   #2da2d4; */
  background: linear-gradient(
    to bottom,
    rgba(0, 71, 144, 0) 0%,
    /* 左侧完全不透明 */ 0%,
    /* 左侧完全不透明 */ rgba(0, 60, 130, 0.36) 100% /* 右侧完全不透明 */
  );
}

.isstack {
  margin-bottom: calc(var(--scale) * (0) / 100 * 1vw);
}
</style>
